//活动页
import React from 'react';
import './Activity.css'
import {Button} from 'element-react'



class Activity extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            noteList: [],
            starclass: [],
            buttype:'primary',
            buttxt:'我要报名',
            item: '',
            flag: 0
        }
    }
   
    componentDidMount(){
        this.setState({
            item:this.props.location.state.item
        })
        let url = 'http://154.8.202.56:8081/useractivity/cha';
        fetch(url, {
        method: 'POST',
        body: JSON.stringify({
            userid: localStorage.getItem("userid")
        }),
        headers: {
            "Access-Control-Allow-Origin":"*",
            'content-type': 'application/json'
        },
        mode: 'cors'
        })
        .then(res => res.json())
        .then(res => {
<<<<<<< HEAD
            //console.log(res)
=======
            console.log(res)
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
            for(let i = 0; i < res.length; i ++){
                if(this.state.item.activityid == res[i].activityid){
                    this.setState({
                        buttype:'text',
                        buttxt: "已报名",
                        flag: 1
                    })
                }
            }
            if(this.state.flag == 0){
                this.setState({
                    buttype: 'primary',
                    buttxt:'我要报名'
                })
            }
        })
        
        // console.log(this.props.location.state.item)
    }  
    render(){
        let item = this.state.item
        // console.log(item)
        const upact = ()=>{
            let url = 'http://154.8.202.56:8081/useractivity/jia';
            fetch(url, {
            method: 'POST',
            body: JSON.stringify({
                userid: localStorage.getItem("userid"),
                activityid: this.state.item.activityid
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
            })
            
        }
        const quxiao = () => {
            let url = 'http://154.8.202.56:8081/useractivity/jian';
            fetch(url, {
            method: 'POST',
            body: JSON.stringify({
                userid: localStorage.getItem("userid"),
                activityid: this.state.item.activityid
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
            })
        }
        return (
            <div className="arclist_body">
                <div className="activity_head">
                    <button onClick={() => this.props.history.goBack()} className="top_button">&lt;</button>
                        <div className='act_top'><p>活动详情</p></div>
                    </div>
                    <div className='activity_body'>
                        <div className='act_name'>
                            <p>{item.activityname}</p>
                        </div>
                        <div className='act_pic'>
                            <img src={item.activitypic} alt="pic" οnerrοr=''/>
                        </div>
                        <div className='act_body'>
                            <p>活动内容</p>
                            <div className='act_content'><p>{item.activitycontent}</p></div>
                        </div>
                        <div className='act_start'>
                            <p>开始时间</p>
                            <div className='act_starttime'><p>{item.starttime}</p></div>
                        </div>
                                        <div className='act_end'>
                                            <p>结束时间</p>
                                            <div className='act_endtime'><p>{item.endtime}</p></div>
                                        </div>                                
                                        <div className='act_claim'>
                                            <p>活动要求</p>
                                            <div className='act_need'><p>{item.claim}</p></div>
                                        </div>
                                        <div className='act_pat'>
                                            <p>投稿方式</p>
                                            <div className='act_up'><p>{item.pattern}</p></div>
                                        </div>
                                        <div className='act_prize'>
                                            <p>活动奖励</p>
                                            <div className='act_money'><p>{item.prize}</p></div>
                                        </div>
                                    </div>
                                    <Button type={this.state.buttype} style={{
                                        width: '120px',
                                        height: '35px',
                                        marginTop:'20px',
                                        marginLeft:'35%',
                                        textAlign: 'center'
                                        }} onClick={()=>{
                                            if(this.state.flag == 0){
                                                this.setState({
                                                    buttype: 'text',
                                                    buttxt:'已报名',
                                                    flag: 1
                                                })
                                                upact()
                                            }
                                            else{
                                                this.setState({
                                                    buttype: 'primary',
                                                    buttxt: '我要报名',
                                                    flag: 0
                                                })
                                                quxiao()
                                            }
                                            
                                        }
                                    }
                                    >{this.state.buttxt}</Button>
                                {/* </li>                
                        ))
                    } */}
            </div>
        )
    }
}

export default Activity;

